<template>
	<view class="pg-content">
		<view class="pg-main">
			<view class="pg-scroll-main">
				<template v-for="(item, i) in allFonts">
					<!-- <view @click="selectFont(item)" :class="{'fs-vitem':true, 'fs-vitem-select': fontId == item.id}" :style="'font-family:' + item.fontFamily">
						<text>123456</text>
						<text>ABCDEFG</text>
						<text>{{item.name}}</text>
					</view> -->
					<view @click="selectFont(item)" class="fs-vitem">
						<image class="font-bg" :src="getFontImage(item)" mode="widthFix"></image>
						<image v-show="item.checked" class="img-checked" src="/static/img/ok.png"></image>
					</view>
				</template>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script>
	//import font from '@/static/js/font-config.js';
	export default {
		data() {
			return {
				allFonts: [],
				fontId: 6
			}
		},
		onLoad() {
			this.getAllFonts();
		},
		onReady() {
			
		},
		methods: {
			getAllFonts() {
				uni.showLoading();
				uni.request({
				    url: '/api/getFonts',
				    success: (res) => {
						if (res.statusCode == 200) {
							this.allFonts = res.data;
						}
				    },
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			getFontImage(e) {
				return `${window.location.origin}/api/getFontBg?id=${e.imageId}`;
			},
			selectFont(e) {
				uni.showModal({
					title: e.name,
					content: '是否设置该字体',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading();
							uni.request({
							    url: `/api/setFont?id=${e.viewTag}`,
								success: (res) => {
									if (res.statusCode == 200) {
										this.allFonts.forEach(item=> {
											item.checked = e == item;
										});
										uni.showToast({
											icon: 'none',
											title: '设置成功'
										});
									}
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	/* @import '@/static/css/all-fonts.css'; */
	.pg-scroll-main {
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 30rpx;
		padding: 30rpx 30rpx 0 30rpx;
	}
	.fs-vitem {
		display: flex;
		position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid #ccc;
		border-radius: 10px;
		height: 300rpx;
		gap: 16rpx;
	}
	.fs-vitem-select {
		background: #ccc;
	}
	.font-bg {
		width: 100%;
		height: 100%;
	}
	.img-checked {
		position: absolute;
		top: -12rpx;
		right: -12rpx;
		width: 66rpx;
		height: 66rpx;
	}
</style>